深入瞭解 FireFox 八、userChrome.css & userContent.c...

舟客 2012-02-05

展开全文

以下将会分为几个章节来探讨这个浏览器：

一、常用的附加元件
 二、少用的附加元件
 三、Plug-in 外挂程式
 四、搜寻引擎
 五、GreasMonkey 增强网页功能!
六、免安装版与精简 Firefox 来加速启动
 七、userChrome.js 功能的强化
八、userChrome.css & userContent.css 介面的修改
九、火狐的安全
 十、编译版、参数、杂项跟加速
十一、自制皮肤
十二、总结

八、userChrome.css & userContent.css 介面的修改

userChrome.js 是用来增加各种功能的。而这边要介绍的 userChrome.css 和 userContent.css 则是修改各种：介面!!

先复习下：附加元件 Stylish 的就是让你可以直接将你所要修改的管理样是套用，而在这个样式搜集网站中就可以看到许多修改 Firefox介面的样式。

我们在这里可以将你要的样式编码复制下来，贴到 userChrome.css 中，重新启动及可看到效果，不需要安装 Stylish !!(stylish的好处就是不用重启就看的到效果了)

先重复一遍：

资料夹 chrome 的位置是在：

XP是在 C:\Documents and Settings\使用者名称\Application Data\Mozilla\Firefox\Profiles\8位乱数.default\chrome

Vista和win7是在 C:\Users\使用者名称\AppData\Roaming\Mozilla\Firefox\Profiles\8位乱数.default\chrome

可将预设的 UserChrome-example.css 改名为 userChrome.css 后使用。

userChrome.css—-控制Firefox介面

它所用的语法为：

/*注解开始~~~

注解的部分不会执行~可利用此来关闭不想要的功能

~~~注解结束*/

它所能修改的范围之广也是要写写不完的~在此就只略略提供我自己有所使用的设定：

/* ==UserStyle==
地址栏RSS图标透明化or隐藏
// ==/UserStyle==*//*

#feed-button {opacity: 0.35 !important;}

#feed-button:hover {opacity: 1.5 !important;}

/*#feed-button{ display:none !important; }*//*这行是完全隐藏图标*/

/* ==UserStyle==
隐藏书签-订阅此页面(因为我不用Firefox内建的rss)
// ==/UserStyle==*/

#subscribeToPageMenuitem, #subscribeToPageMenupopup

{ display:none !important;

}

/* 隐藏状态栏进度条 */

#statusbar-progresspanel {display: none !important;}

/*使用前*/

/*使用后*/

/* 状态栏背景设为透明 */

#status-bar {-moz-appearance: none !important;background: transparent !important;}

/* ==UserStyle==
项目整齐排列 Customize Toolbar window – dynamic columns
// ==/UserStyle==*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* allow any number of columns in Customize Toolbar box */

#palette-box {

float: left !important;

overflow-x: hidden !important;

}

#palette-box .paletteRow {

display: inline !important;

}

#palette-box toolbarpaletteitem {

display: inline !important;

width: 105px !important;

height: 85px !important;

margin: 0 !important;

padding: 0 !important;

}

#palette-box toolbarpaletteitem > hbox,

#palette-box toolbarpaletteitem label {

display: inline !important;

}

/* fix separator */

#wrapper-separator #separator {

display: inline !important;

font-size: 40px !important;

}

/* make all buttons’ text be on the bottom – thanks Grist! */

#palette-box toolbarpaletteitem toolbarbutton {

-moz-box-orient: vertical !important;

text-align: center !important;

}

/* show button that AIOS hides by mistake */

#wrapper-console2-button #console2-button {

display: -moz-box !important;

}

/*使用前 VS 使用后*/

/* ==UserStyle==
合并重新整理-停止按钮 Combine Stop/Reload buttons(要自行将停止按钮移到重新整理的左边才有作用)
// ==/UserStyle==*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#stop-button[disabled="true"] { display:none; }

#stop-button:not([disabled]) + #reload-button { display:none; }

$Combine Stop\Reload buttons$

/* ==UserStyle==
添加书签时直接显示Tag栏
// ==/UserStyle==*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* Mostrare i campi indirizzo, descrizione e keyword nel pannello per l’aggiunta di un nuovo segnalibro */

#editBMPanel_descriptionRow, /* campo descrizione */

#editBMPanel_locationRow, /* campo indirizzo */

#editBMPanel_keywordRow /* campo keyword (parola chiave) */{

visibility: visible;

-moz-box-align: center;

}

/*使用前 vs 使用后*/

/* ==UserStyle==
隐藏书签选单"将本页加入书签"、 "管理书签"、 "将所有标签页加为书签" (因为使用地址栏上的星号来加入书签更方便)

// ==/UserStyle==*/

menuitem[key="addBookmarkAsKb"],

/*menuitem[key="manBookmarkKb"],*//*此行为隐藏管理书签*/

menuitem[key="bookmarkAllTabsKb"] {

display: none !important;

}

bookmarkAllTabs

/* ==UserStyle==
隐藏书签右键"全部用分页开启"
// ==/UserStyle==*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

@-moz-document url("chrome://browser/content/browser.xul") {

menuitem[oncommand="openUILink(this.getAttribute('siteURI'), event);"],

menuitem[oncommand="PlacesUIUtils.openContainerNodeInTabs(this.parentNode._resultNode, event);"],

menuseparator[builder="end"] {

display:none !important;

}

}

openUILink

/* ==UserStyle==
隐藏添加搜索引擎选项（Add Engines）(搜寻引擎都已经完全整理好了，就把这个选项隐藏~)
// ==/UserStyle==*/

#search-proxy-button menuitem[label=Add engines ...] {display: none;

}

/* ==UserStyle==
隐藏右键菜单，不希望隐藏的就把它给注解掉
// ==/UserStyle==*/

/* ==右键选单- 键结==*/

#context-openlink, /* 在新视窗中打开 */

#context-openlinkintab, /* 在新分页中打开 */

#context-sep-open, /* "在新分页中打开"下的分隔线 */

#context-bookmarklink, /* 将此键结加入书签* /

/* #context-savelink, 键结令存为… */

#context-sendlink, /* 邮寄键结 */

/*#context-copyemail, 复制Email地址 */

/*#context-copylink, 复制键结地址 */

#context-sep-copylink, /* "复制键结地址"下的分隔线 */

/* ==右键选单- 图片==*/

#context-viewimage, /* 查看图片 */

#context-copyimage-contents, /* 复制图片 */

/*#context-copyimage, 复制图片地址 */

#context-sep-copyimage, /* "复制图片地址"下的分隔线 */

/*#context-saveimage, 图片另存为… */

#context-sendimage, /* 邮寄图片 */

#context-setWallpaper, /* 设为桌布 */

#context-setDesktopBackground, /* Set As Desktop Background… */

#context-blockimage, /* 阻挡…的图片 */

/* ==右键选单- 页面==*/

#context-back, /* 后退 */

#context-forward, /* 前进 /

#context-reload, /* 重新整理 */

#context-stop, /* 停止 */

/*#context-sep-stop, "停止"下面的分隔线 */

#context-bookmarkpage, /* 将此页加入书签 */

#context-savepage, /* 另存页面为… */

#context-sendpage, /* 邮寄此页面 */

#context-sep-viewbgimage, /* "查看背景图片"上面的分隔线 */

#context-viewbgimage, /* 查看背景图片 */

/* ==右键选单-文字输入区块==*/

#context-undo, /* 复原 */

/*#context-sep-undo, "复原"下面的分隔线 */

/*#context-cut, 剪下 */

/*#context-copy, 复制 */

/*#context-paste, 贴上 */

/*#context-delete, 删除 */

#context-sep-paste, /* "贴上"下面的分隔线 */

#context-selectall, /* 全选 */

#context-sep-selectall, /* "全选"下面的分隔线 */

/* ==右键选单-其他==*/

#context-keywordfield, /* 将关键字加入搜寻引擎 */

#context-searchselect, /* 以…搜寻 */

#frame-sep, /* 分隔线 */

#frame, /* 框架 */

#context-sep-properties, /* 分隔线 */

#context-viewpartialsource-selection, /* 检视选择范围原始码 */

#context-viewpartialsource-mathml, /* 检视MathML原始码 */

#context-viewsource, /* 检视原始码 */

#context-viewinfo, /* 检视页面资讯 */

#context-metadata, /* Properties */

#context-sep-bidi, /* 分隔线 */

#context-bidi-text-direction-toggle, /* 转变文字方向 */

#context-bidi-page-direction-toggle /* 转变页面方向 */{

display:none !important;

}
#edit-menu { display: none;}

其余的，可以自行 google 或到找寻~，以下列出几个搜集的帖子：

MozTW：Firefox 一分钟教室-userChrome.css

Mozest社区：userChrome.css 相关技巧

userContent.css—用来改变网页的外观

这里的也可以到来找寻修改网页样式的

我在此只使用了三个：

/* ~~~~让 Firefox 的网页输入框也像Safari一样高亮发光~~~~ */

input:focus, select:focus, textarea:focus {

outline: 2px solid #10bae0 ;

-moz-outline-radius: 3px ;

}

/* ~~~~ 图片置中Center Images ~~~~ */

@namespace url(http://www./1999/xhtml);

html > body > img:only-child {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

padding: 3px;

}

/* Force text to wrap when it is longer than the screen width */

pre {white-space:-moz-pre-wrap}

/*使用前 vs 使用后 */

/* ~~~~ 显示图片无法显示的"图示"Show image placeholders ~~~~ */

@-moz-document url-prefix(http), url-prefix(file) {

img:-moz-broken{

-moz-force-broken-image-icon:1;

width:24px;

height:24px;

}

}

/*使用前*/